<template>
  <div>
    <h2>{{ msg }}</h2>
    <button @click="setMsg()">触发方法设置msg的值</button>
    <br><br>
    <button @click="getMsg()">触发方法获取msg的值</button>
    <br><br>
    <div class="red">
    </div>
    <br>
    <div :class="myClass">
    </div>
    <br><br>
    <button @click="changeClass()">改变class</button>
    <br><br>
    <h2>class绑定多个动态属性</h2>

    <div :class="{ 'active': isActive, 'red': isRed }">
      div
    </div>

    <br><br>
    <div class="blue" :class="{ 'active': isActive }">
      div
    </div>

    <br>
    <div :class="[errorClass, baseClass]">div</div>

    <br>
    <div :class="[flag ? baseClass : errorClass]">三木运算绑定class</div>

    <h2>绑定多个style</h2>
    <br>
    <div :style="'color:' + color">绑定style</div>

    <br>
    <div :style="{ 'color': activeColor, 'fontSize': fontSize }">
      绑定多个style
    </div>

    <br>
    <div :style="styleObject">
      绑定多个style
    </div>

    <br>
    <div :style="[baseStyles, orangeStyles]">
      绑定多个style
    </div>

    <br>
    <ul>
      <li v-for="(item, index) in list" :key="index" :style="[index == 0?styleRed:null, index == 1? styleBlue:null]">
        {{ item }}
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello, Vue",
      myClass: "red",
      isActive: true,
      isRed: false,
      errorClass: "error",
      baseClass: "base",
      flag: true,
      color: "red",
      activeColor: "blue",
      fontSize: "20px",
      styleObject: {
        color: "red",
        fontSize: "43px"
      },
      baseStyles: {
        width: "100px",
        height: "100px",
        fontSize: '18px'
      },
      orangeStyles: {
        background: "orange"
      },
      list: ['老大', '老二', '老三'],
      styleRed: {
        color: "red"
      },
      styleBlue: {
        color: "blue"
      }
    }
  },
  methods: {
    setMsg() {
      this.msg = "你好，Vue"
    },
    getMsg() {
      alert(this.msg)
    },
    changeClass() {
      this.myClass = "blue"
    }
  }
}
</script>

<style>
.base {
  width: 300px;
  height: 300px;
}

.active {
  display: block;
  font-size: 30px;
  color: orange;
}

.error {
  background: orange;
  font-size: 30px;
  color: red;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.blue {
  background: blue;
  width: 100px;
  height: 100px;
}
</style>
